<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>订单统计</span>
                <el-check-tag 
                :checked="current === item.value"
                class="check"
                v-for="item,index in checkList"
                @click="handler(item.value)"
                >
                    {{ item.title }}
                </el-check-tag>
            </div>
        </template>
    </el-card>
</template>
<script setup lang='ts'>
import { ref , reactive ,onMounted} from 'vue'
import { statisticsThreeApi } from '@/api/backstage'
import * as echarts from 'echarts';

const current = ref<string>('week')

const handler = (type:string) => {
    console.log(type);
    
    current.value = type
}


const checkList = [
    {
        title : '近一个月',
        value : 'mouth'
    },
    {
        title : '近七天',
        value : 'week'
    },
    {
        title : '近24小时',
        value : 'hour'
    }
]
onMounted(() => {
    statisticsThreeApi(current.value).then(res => {
        console.log(res);
        
    })
})
</script>
<style lang='scss' scoped>
.card-header{
    display: flex;
    justify-content: space-between;
    >.span{
        font-size: 14px;
    }
}
.check{
   margin-right: "8px" ;
   font-size: 14px;
}
</style>